简单的防抖和节流函数

发表于 | 分类于

函数防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function debounce(func,wait,immediate) {
    let timer;

    return function () {
        let context = this;
        let args = arguments;

        if (timer) clearTimeout(timer);
        console.log(immediate)
        console.log(timer)
        if (immediate) {
            if (!timer){
            	func.apply(context, args)
            }
            timer = setTimeout(() => {
                timer = null;
            }, wait)
            
        }
        else {
            timer = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

函数节流

时间戳版：

1
2
3
4
5
6
7
8
9
10
11
12
function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

定时器版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function throttle(func, wait) {
    let timer;
    return function() {
        let context = this;
        let args = arguments;
        if (!timer) {
			// func.apply(context, args) // 放这里立即执行
            timer = setTimeout(() => {
                func.apply(context, args) // 放这里不立即执行
				timer = null;
            }, wait)
        }

    }
}

乍一眼时器版看上去和函数防抖一样，最本质的的区别在于if (timer) clearTimeout(timer); 防抖如果重复触发会清除定时器，重新开始等待（立即执行版第一次不算的话），而节流则不管，时间到了就执行，马上执行或者延迟执行看需求选择。